@import "normalize";
@import "base";
@import "variable";

// 字体大小设置
.font_dpr(@font-size: 16px) {
  font-size: @font-size;

  [data-dpr= "2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr= "3"] & {
    font-size: @font-size * 3;
  }
}

.main {
  .nav {
    background-color: #fff;
    border-top: 1rem/@base solid #f1f1f1;
    border-bottom: 1rem/@base solid #f1f1f1;
    padding-top: 34rem/@base;

    li {
      float: left;
      width: 25%;
      &:nth-last-child(-n + 4) {
        display: none;
      }
      a {
        display: block;
        text-decoration: none;
        padding-top: 16rem/@base;
      }
      img  {
        width: 108rem/@base;
        height: 108rem/@base;
        margin: 0 auto;
      }
      p {
        text-align: center;
        height: 55rem/@base;
        line-height: 55rem/@base;
        .font_dpr(16px);
      }
    }
  }

  .discount {
    .title {
      height: 67rem/@base;
      line-height: 67rem/@base;
      border-bottom: 1rem/@base solid #ff9a20;
      background-color: #ffa42c;
      position: relative;
      color: #fff;
      padding-left: 20rem/@base;
      .font_dpr(18px);

      a {
        display: block;
        position: absolute;
        width: 40rem/@base;
        height: 40rem/@base;
        top: 16rem/@base;
        right: 20rem/@base;
        img  {
          width: 100%;
          height: 100%;
        }
      }
    }
    .product-item {
      height: 258rem/@base;
      border-bottom: 1rem/@base solid #ccc;
      padding-top: 30rem/@base;
      a {
        display: block;
        text-decoration: none;
      }
      .img-box img {
        width: 200rem/@base;
        height: 200rem/@base;
      }
      .info {
        overflow: hidden;
        padding-left: 40rem/@base;
      }
      .info-t {
        height: 130rem/@base;
        line-height: 40rem/@base;
        .font_dpr(16px);
        padding-right: 50rem/@base;
        
        > span {
          color: #ff6c00;
        }
      }
      .info-b {
        margin-bottom: 55rem/@base;
        color: #c1c2ba;
        padding-right: 30rem/@base;

        span {
          padding-left: 20rem/@base;
          .icon-comment {
            display: inline-block;
            width: 23rem/@base;
            height: 22rem/@base;
            background: url(../images/comment.svg) left center ;
            vertical-align: middle;
          }
        }
      }
    }
    
  }
  .get-more {
    height: 85rem/@base;
    padding: 0 20rem/@base;
    a {
      display: block;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      height: 63rem/@base;
      line-height: 63rem/@base;
      background-color: #f9f9f9;
      border: 1rem/@base solid #e7e7e7;
      border-radius: 5rem/@base;
      text-decoration: none;
      margin-top: 20rem/@base;
      .font_dpr(16px);
    }
  }
  .brand-rank {
      height: 67rem/@base;
      line-height: 67rem/@base;
      border-bottom: 1rem/@base solid #ff9a20;
      background-color: #ffa42c;
      position: relative;
      color: #fff;
      padding-left: 20rem/@base;
      .font_dpr(18px);

      a {
        display: block;
        position: absolute;
        width: 40rem/@base;
        height: 40rem/@base;
        top: 16rem/@base;
        right: 20rem/@base;
        img  {
          width: 100%;
          height: 100%;
        }
      }
  }
  
}